<template>
  <el-dialog
    title="编辑图纸"
    :visible.sync="visible"
    width="1200px"
    append-to-body
    :close-on-click-modal="false"
  >
    <div class="dioSty">
      <div class="allRegulateSty" v-for="item in listOptions" :key="item.id">
        <div class="imgSty">
          <img
            :src="
              item.fileUrl ? uploadUrl + item.fileUrl : '@/assets/images/lead-img.jpg'
            "
            style="max-width: 100%; height: auto"
          />
        </div>
        <div class="textAllSty">
          <div class="textSty">{{ item.fileName }}</div>
        </div>
        <div class="btnSty">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            style="margin-left: 15px"
            @click="downImg(item)"
            >下载</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: red"
            @click="delImg(item)"
            >删除</el-button
          >
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getBuildingImageDetail, delBuildingImage } from "@/api/system/ai";
export default {
  data() {
    return {
      visible: false, // 显示弹窗
      form: {},
      rules: {},
      // 上传参数
      uploadUrl: process.env.VUE_APP_WEBSC_API,
      fileList: [],
      uploadList: [],
      listOptions: [],
    };
  },
  methods: {
    init(row) {
      this.visible = true;
      this.form = row;
      getBuildingImageDetail(row.floorId).then((res) => {
        this.listOptions = res.data;
      });
    },
    cancel() {
      this.visible = false;
    },
    // 移除上传
    beforeRemove(file, fileList) {
      this.uploadList = fileList;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.uploadList = fileList;
    },
    // 文件上传前的大小
    beforeAvatarUpload(file) {
      const isRAR = file.type === "application/x-rar-compressed";
      const isZIP = file.type === "application/zip";
      const isMSOffice =
        file.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || // .docx
        file.type === "application/vnd.ms-word" || // .doc
        file.type === "application/pdf"; // .pdf
      const isAccepted = isRAR || isZIP || isMSOffice;
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isAccepted) {
        this.$message.error(
          "上传文件格式不正确，请上传 .rar、.zip、.doc、.docx 或 .pdf 格式的文件！"
        );
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isAccepted && isLt2M;
    },
    downImg(row) {
      this.$download.resource(row.fileUrl, row.fileName);
    },
    delImg(row) {
      delBuildingImage(row.id).then((res) => {
        this.$modal.msgSuccess(res.msg);
        getBuildingImageDetail(this.form.floorId).then((res) => {
          this.listOptions = res.data;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dioSty {
  display: flex;
  flex-wrap: wrap;
}

.allRegulateSty {
  width: 340px;
  margin-bottom: 50px;
  margin-right: 50px;

  .imgSty {
    height: 200px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    background: rgb(229, 240, 251);
    text-align: center;
  }

  .textAllSty {
    height: 50px;
    border: 1px solid #ebebeb;
    border-top: none;
  }

  .textSty {
    padding: 15px 10px;
  }

  .btnSty {
    height: 50px;
    border: 1px solid #ebebeb;
    border-top: none;
    line-height: 50px;
    border-radius: 0 0 5px 5px;
  }
}
</style>
